第 2 步 - 为汽车车型创建主题

在本教程的这一步骤中，您将学习如何将一个 Kanzi Studio 工程用于产品的两个车型。在上一步骤中，您已为汽车的汽油车型创建了两个主题（Classic 和 Modern）。在本步骤中，您将学习修改该工程，并为汽车混合动力车型创建主题。

为组合仪表结构设置主题

在本节中，您将为每个汽车车型设置组合仪表背景的可视外观、主要仪表之间显示的汽车模型、以及 RPM 仪表中心显示的汽车车型名称。

要为组合仪表结构设置主题：

  1. 在素材库 (Library) 按下 Alt 并右键点击 主题 (Theme) 中选择 主题组 (Theme Group)，并将其命名为 Car variant。
  2. 打开主题编辑器 (Theme Editor) 中的 Car variant 主题组并创建两个主题：Gasoline 和 Hybrid。
  3. 在预设件 (Prefabs) 中右键点击 Primary gauges Classic > Background 并选择添加资源至主题组 (Add Resources to a Theme Group)。
    您在此处为 Car variant 主题组添加组合仪表背景资源。
  4. 在添加资源至主题组 (Add Resources to a Theme Group) 窗口中：
    • 将主题组 (Theme Group) 设为Car variant。
    • 重命名资源 ID：
      • Cluster frame inner.Model3D.Mesh 为Cluster frame inner
      • Cluster frame outer.Model3D.Mesh 为Cluster frame outer
    点击添加 (Add)。
    建议

    当为资源 ID 使用在工程上下文中有意义的名称时，您创建一个更容易设置主题和维护的工程。如果在添加资源 ID 到主题组中时不能选取合适名称，您可以在主题编辑器 (Theme Editor) 中重命名资源 ID。

  5. 在Car variant 主题组的主题编辑器 (Theme Editor) 中设置资源 ID：
    • 对于Gasoline 主题设置：
      • Cluster frame outer 资源 ID 设为指向 Cluster frame outer Gasoline 网格
      • Cluster frame inner资源 ID 设为指向 Cluster frame inner Gasoline 网格
    • 对于Hybrid 主题设置：
      • Cluster frame outer 资源 ID 设为指向 Cluster frame outer Hybrid 网格
      • Cluster frame inner 资源 ID 设为指向 Cluster frame inner Hybrid 网格
  6. 在预设件 (Prefabs) 中右键点击 Primary gauges Classic > Car 并选择添加资源至主题组 (Add Resources to a Theme Group)。
    您在此处为 Car variant 主题组添加主要仪表之间显示的汽车模型资源。
  7. 在添加资源至主题组 (Add Resources to a Theme Group) 窗口中：
    • 将主题组 (Theme Group) 设为Car variant。
    • 将 Car.PrefabViewConcept.Prefab 资源 ID 重命名为 Car。
    点击添加 (Add)。

    建议

    如果不小心添加资源 ID 到错误的主题组，在字典 (Dictionaries) 中点击要移动的资源 ID 旁的 ，并将该资源 ID 放在要使用的主题组中。

  8. 在 Car variant 主题组的主题编辑器 (Theme Editor) 中设置 Car 资源 ID：
    • 对于Gasoline 主题，将资源 ID 设置为指向Car Gasoline 预设件。
    • 对于Hybrid 主题，将资源 ID 设置为指向Car Hybrid 预设件。
  9. 在预设件 (Prefabs) 中右键点击 Primary gauges Classic > Primary gauges grid Classic > Table RPM 并选择添加资源至主题组 (Add Resources to a Theme Group)。
    您在此处为 Car variant 添加在 RPM 仪表中心显示的汽车车型名称资源。
  10. 在添加资源至主题组 (Add Resources to a Theme Group) 窗口中：
    1. 将主题组 (Theme Group) 设为Car variant。
    2. 点击 启用 文本块 (Text Block) 节点查看功能。
      在窗口右上角，您可以选择要在窗口中显示哪些类型的资源。
    3. 选择并将 G A S O L I N E 资源 ID 重命名为Variant。
    点击添加 (Add)。
  11. 在 Car variant 主题组的 主题编辑器 (Theme Editor) 中，双击各主题单元格，并为Variant 资源 ID 输入文本：
    • 对于Gasoline 主题，输入 G A S O L I N E。
    • 对于Hybrid 主题，输入 H Y B R I D。

现在，您在字典 (Dictionaries) 中选择Car variant 主题组中的某主题时，预览 (Preview) 显示到目前为止您为两个汽车车型定义的资源。

为主要仪表颜色设置主题

在本节中，为每个汽车车型设置主要仪表的颜色。

要为主要仪表颜色设置主题：

  1. 在预设件 (Prefabs) 中右键点击 Primary gauges Classic > Gauges 并选择添加资源至主题组 (Add Resources to a Theme Group)。
  2. 在添加资源至主题组 (Add Resources to a Theme Group) 窗口中：
    • 将主题组 (Theme Group) 设为Car variant。
    • 选择并将 Gauge.Node.Style 资源 ID 重命名为Primary gauges color Classic。
    点击添加 (Add)。
  3. 在 Car variant 主题组的主题编辑器 (Theme Editor) 中设置 Primary gauges color Classic 资源 ID：
    • 对于Gasoline 主题，将资源 ID 设为指向Primary gauges color Classic Gasoline 样式。
    • 对于Hybrid 主题，将资源 ID 设为指向Primary gauges color Classic Hybrid 样式。

    这些样式设置定义两个主要仪表的 Gauge 模型 (Model) 节点使用的材质 发射颜色 (Emissive Color) 属性。

现在，您在字典 (Dictionaries) 中选择Car variant 主题组中的某主题时，预览 (Preview) 显示到目前为止您为两个汽车车型定义的资源。

为次要仪表设置主题

在本节中，您将学习为每个汽车车型设置次要仪表的可视外观，以便更改：

要为次要仪表设置主题：

  1. 在预设件 (Prefabs) 中选择 Secondary gauges > Secondary gauges grid > Left gauge info > Value，并在属性 (Properties) 中添加样式 (Style) 属性，然后将其设置为 Secondary gauges Left gauge value Gasoline 样式。
    Secondary gauges Left gauge value Gasoline 样式仅针对2D 文本块 (Text Block 2D) 节点，使用绑定从RootPage 节点中的 Temperature 属性获得引擎温度仪表的值。
  2. 在属性 (Properties) 中移除 Value 节点的 绑定 (Bindings) 属性。
    移除绑定 (Bindings) 属性是因为要使用Secondary gauges Left gauge value Gasoline 样式来设置该绑定。
  3. 在预设件 (Prefabs) 中右键点击 Secondary gauges，选择添加资源至主题组 (Add Resources to a Theme Group) 并在添加资源至主题组 (Add Resources to a Theme Group) 窗口中：
    1. 将主题组 (Theme Group) 设为Car variant。
    2. 点击 启用 文本块 (Text Block) 节点查看功能。
    3. 选择并重命名这些资源 ID：
      • Gauge.Node.Style 为Secondary gauges Right
      • Gauge.Node.Style_1 为Secondary gauges Left
      • 130 为Secondary gauges scale max Left
      • 50 为Secondary gauges scale min Left
      • Left gauge icon.Image2D.Image 为Secondary gauges icon Left
      • Value.Node.Style 为Secondary gauges value Left
      • ° 为Secondary gauges unit Left
    点击添加 (Add)。
  4. 在Car variant 主题组的主题编辑器 (Theme Editor) 中设置您在上一步中添加的资源 ID：
    • 对于Gasoline 主题设置：
      • Secondary gauges Right 为指向Secondary gauge right Gasoline 样式
        样式设置定义右侧次要仪表的 Gauge 模型 (Model) 节点使用的材质 发射颜色 (Emissive Color) 属性。
      • Secondary gauges Left 为指向Secondary gauge left Gasoline 样式
        样式设置绑定从 RootPage 节点的 Temperature 属性获取引擎温度仪表值，并设置定义左侧次要仪表的 Gauge 模型 (Model) 节点使用的材质 发射颜色 (Emissive Color) 属性。Secondary gauges > Gauges > 场景 (Scene) > Left gauge > Gauge 模型 (Model) 节点使用绑定值以设置仪表条的位置。
      • Secondary gauges scale max Left 为130
      • Secondary gauges scale min Left 为50
      • Secondary gauges icon Left 为 Temp_Icon 纹理
      • Secondary gauges value Left 为Secondary gauges Left gauge value Gasoline 样式
        样式设置绑定从 RootPage 节点的 Temperature 属性获得引擎温度仪表值。Secondary gauges > Secondary gauges grid > Left gauge info > Value 2D 文本块 (Text Block 2D) 节点显示值。
      • Secondary gauges unit Left 为°
    • 对于Hybrid 主题设置：
      • Secondary gauges Right 为指向Secondary gauge right Hybrid 样式
      • Secondary gauges Left 为指向Secondary gauge left Hybrid 样式
      • Secondary gauges scale max Left 为100
      • Secondary gauges scale min Left 为0
      • Secondary gauges icon Left 为 Battery_Icon 纹理
      • Secondary gauges value Left 为Secondary gauges Left gauge value Hybrid 样式
      • Secondary gauges unit Left 为%

现在，您在字典 (Dictionaries) 中选择Car variant 主题组中的某主题时，预览 (Preview) 显示到目前为止您为两个汽车车型定义的资源。

更改Primary gauges Modern 预设件

在本节中，您将更改Primary gauges Modern 预设件，以便能为 Gasoline 和 Hybrid 汽车车型主题使用相同的预设件。

要更改Primary gauges Modern 预设件：

  1. （可选） 在字典 (Dictionaries) 中将 Cluster theme 设置为Modern，以便能在预览 (Preview) 中看到对Primary gauges Modern 预设件进行的更改。
  2. 在Primary gauges Modern 预设件中，用资源 ID 替换资源。
    在本教程步骤的第一节中为Primary gauges Classic 预设件设置主题时，您创建并添加了这些资源 ID 到 Car variant 主题组中。
    • 在 预设件 (Prefabs) 中选择 Primary gauges Modern > Gauges > 场景 (Scene) > Cluster frame outer，并在 属性 (Properties) 中将 网格 (Mesh) 属性设置为 <ResourceID> 并使用 Cluster frame outer 资源 ID。
    • 在 预设件 (Prefabs) 中选择 Primary gauges Modern > Gauges > 场景 (Scene) > Cluster frame inner，并在 属性 (Properties) 中将 网格 (Mesh) 属性设置为 <ResourceID> 并使用 Cluster frame inner 资源 ID。
    • 在预设件 (Prefabs) 中选择 > Primary gauges Modern > Primary gauges grid Modern > Table RPM，在属性 (Properties) 中添加 Theming.TableRPMVariant 属性并将其设置为 <ResourceID>，并使用 Variant 资源 ID。
  3. 在 Primary gauges Modern > Gauges > 场景 (Scene) > Right gauge 和 Left gauge 节点中，用样式替换 渲染变换 (Render Transformation)：
    1. 在预设件 (Prefabs) 中选择 Primary gauges Modern > Gauges > 场景 (Scene) > Right gauge，并在属性 (Properties) 中添加样式 (Style) 属性，然后将其设置为 Primary gauges right position Modern Gasoline 样式。
      样式设置 渲染变换 (Render Transformation) 属性的值。
    2. 移除 Right gauge 节点的 渲染变换 (Render Transformation) 属性。
      移除属性是因为使用 Primary gauges right position Modern Gasoline 样式来设置属性的值。
    3. 为 Primary gauges Modern > Gauges > 场景 (Scene) > Left gauge 节点重复上述两步，但使用 Primary gauges left position Modern Gasoline 样式。
  4. 在预设件 (Prefabs) 中右键点击 Primary gauges Modern，选择添加资源至主题组 (Add Resources to a Theme Group) 并在添加资源至主题组 (Add Resources to a Theme Group) 窗口中：
    • 将主题组 (Theme Group) 设为Car variant。
    • 选择并重命名这些资源 ID：
      • Right gauge.Node.Style 为Primary gauges Modern Right gauge
      • Gauge top.Node.Style 为Primary gauges Modern Top
      • Left gauge.Node.Style 为Primary gauges Modern Left gauge
      • Speed value trajectory.Node.Style 为Primary gauges Modern Value
    点击添加 (Add)。
  5. 在Car variant 主题组的主题编辑器 (Theme Editor) 中设置您在上一步中添加的资源 ID：
    • 对于Gasoline 主题设置：
      • Primary gauges Modern Right gauge 为指向Primary gauges right position Modern Gasoline 样式
        样式使用 渲染变换 (Render Transformation) 属性设置右侧主要仪表的位置。
      • Primary gauges Modern Top 为指向Primary gauges color Modern Gasoline 样式
        样式设置定义顶层两个仪表的Gauge top 模型 (Model) 节点使用的材质 环境颜色 (Ambient Color) 属性。
      • Primary gauges Modern Left gauge 为指向Primary gauges left position Modern Gasoline 样式
        样式使用 渲染变换 (Render Transformation) 属性设置左侧主要仪表的位置。
      • Primary gauges Modern Value 为指向Primary gauges value Modern Gasoline 样式
        样式使用 垂直边距 (Vertical Margin) 属性设置 Speed value trajectory 和 RPM value trajectory 轨迹布局 (Trajectory Layout) 节点的位置。主要仪表速度和 RPM 值沿这些 轨迹布局 (Trajectory Layout) 节点移动。
    • 对于Hybrid 主题设置：
      • Primary gauges Modern Right gauge 为指向Primary gauges right position Modern Hybrid 样式
      • Primary gauges Modern Top 为指向Primary gauges color Modern Hybrid 样式
      • Primary gauges Modern Left gauge 为指向Primary gauges left position Modern Hybrid 样式
      • Primary gauges Modern Value 为指向Primary gauges value Modern Hybrid 样式

现在，当您在字典 (Dictionaries) 中选择 Cluster theme 主题组中的 Modern 主题并在 Car variant 主题组中更改主题时，预览 (Preview) 显示 Modern 主题中两个车辆车型的资源。


< 上一步
下一步 >

另请参阅

为应用程序制定主题

使用主题 (Theme)

使用样式